<template>
  <el-checkbox-group v-model="checkboxValue" @change="handleChange">
    <template v-for="(item,index) in optionList">
      <el-checkbox :key="index" :label="item[optionKey.key]" :disabled="!!item.disabled">
        {{ item[optionKey.value] }}
      </el-checkbox>
    </template>
  </el-checkbox-group>
</template>

<script>
export default {
  name: 'CheckBoxGroupView',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    optionList: {
      type: Array,
      default: () => []
    },
    optionKey: {
      type: Object,
      default: () => ({ key: 'key', value: 'value' })
    }
  },
  data() {
    return { checkboxValue: [] }
  },
  watch: {
    value: {
      handler: function(val = []) {
        this.$data.checkboxValue = val
      },
      immediate: true
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('input', e)
      this.$emit('change', e)
    }
  }
}
</script>

<style>

</style>
